<template>
  <div class="idiom">
    <div class="option-box serach-bar">
      <el-form ref="searchForm" label-width="140px">
        <el-row :gutter="30">
          <el-col :span="8">
            <el-form-item label="请输入答案">
              <el-input v-model="answer"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
            ><el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
              >搜索</el-button
            ></el-col
          ></el-row
        ></el-form
      >
    </div>
    <div class="option-box">
      <div class="table-options">
        <el-button type="primary" size="small" plain @click="addAll"
          >批量导入</el-button
        >
        <el-button type="primary" size="small" plain @click="addDialog"
          >新增</el-button
        >
        <el-button type="primary" size="small" plain @click="toggleSelection">
          {{
            multipleSelection.length !== size ? "全选" : "取消全选"
          }}</el-button
        >
        <el-button
          type="warning"
          size="small"
          plain
          @click="deleteAll"
          v-show="multipleSelection.length > 1"
          >批量删除
        </el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="成语图" prop="image"></el-table-column>
        <el-table-column label="答案区" prop="answer"></el-table-column>
        <el-table-column label="混淆区" prop="content"></el-table-column>
        <el-table-column label="成语注释" prop="explain"></el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :size="size"
        :total="total"
        :page="page"
      ></pagination>
    </div>
    <dataDialog ref="dialog" :title="title"></dataDialog>
  </div>
</template>

<script lang="ts">
import dataDialog from "./dataDialog.vue";
import pagination from "@/components/pagination.vue";
import { Component, Vue } from "vue-property-decorator";
import { getIdiomList } from "@/api/api";

@Component({
  components: { pagination, dataDialog },
})
export default class ContentIdimo extends Vue {
  tableData: any[] = [];
  answer: string = "";
  loading: boolean = false;
  page: number = 1;
  size: number = 10;
  total: number = 20;
  isAll: boolean = false;
  multipleSelection: any = [];

  title: string = "";

  addAll() {}

  deleteAll() {
    if (this.multipleSelection && this.multipleSelection.length) {
      this.$confirm(`是否批量删除这些数据?`, "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          this.multipleSelection.forEach((item: object) => {
            this.tableData = this.tableData.filter((data) => item != data);
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {});
    } else {
      this.$message({
        type: "warning",
        message: "您还未选中任何内容!",
      });
    }
  }

  toggleSelection() {
    if (this.multipleSelection.length === this.size) {
      (this.$refs.multipleTable as any).clearSelection();
    } else {
      (this.$refs.multipleTable as any).toggleAllSelection();
    }
  }

  handleSelectionChange(val: any) {
    console.log(val);
    this.multipleSelection = val;
  }

  handleSearch() {
    this.page = 1;
    this.getDataList();
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.getDataList();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.getDataList();
  }
  handleEdit() {
    this.title = "内容编辑";
    (this.$refs.dialog as any).dialogVisible = true;
  }
  addDialog(): void {
    this.title = "新增内容";
    (this.$refs.dialog as any).dialogVisible = true;
  }
  handleDelete(item: any) {
    this.$confirm(`是否删除答案为${item.answer}的此条数据?`, "", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // this.tableData = this.tableData.filter((data) => item != data);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      })
      .catch(() => {});
  }
  getDataList() {
    this.loading = true;
    getIdiomList().then((res) => {
      this.loading = false;
      this.tableData = res.data;
    });
  }
  init() {
    this.getDataList();
  }
  created() {
    this.init();
  }
}
</script>

<style scoped>
</style>